<template>
      <el-dialog title="产品编辑" :visible.sync="show" width="40%" 
      :before-close="dialogClose">
      <el-form ref="form" :model="item" label-width="80px">
          <el-form-item label="产品名称">
                <el-input v-model="item.name" class="select_input"></el-input>
          </el-form-item>
          <el-form-item label="产品分类">
              <el-select v-model="item.cid" placeholder="请选择产品分类">
                  <el-option v-for="(item,index) in cate" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="产品单位">
              <el-input v-model="item.lable" class="select_input"></el-input>
          </el-form-item>
          <el-form-item label="产品价格">
              <el-input v-model="item.price" class="select_input"></el-input>
          </el-form-item>
          <el-form-item label="产品库存">
              <el-input v-model="item.num" class="select_input"></el-input>
          </el-form-item>
          <el-form-item label="产品规格">
              <el-tag :key="tag" v-for="tag in tags" closable
              :disable-transitions="false"
              @close="handleClose(tag)">{{tag}}</el-tag>
              <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新规格</el-button>
          </el-form-item>
          <el-form-item label="产品备注">
              <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="item.remark">
              </el-input>
          </el-form-item>
          <el-form-item label="产品图片">
             <el-upload
              class="avatar-uploader"
              :action="apiUrl"
              name="img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="item.img" :src="imgUrl+item.img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        <el-form-item>
        <div align="center">
          <el-button type="primary" @click="add">确 定</el-button>
          <el-button @click="dialogClose">取 消</el-button>
        </div>
        </el-form-item>



      </el-form>
    </el-dialog>
</template>
 
<script>
export default {
  name: "goodsEdit",
  props:['item','show','tags'],
  data() {
    return {
      imgUrl:this.url,
      cate:[],
      inputValue: '',
      inputVisible:false,
      apiUrl:this.apiUrl+'public/upload',
    };
  },
  created: function(e) {
      this.getCate()
  },
  methods: {
    dialogClose:function(){
      this.$emit("func",{'key':'editShow','type':0})
    },
    getCate:function(){
      var data = {store_id:localStorage.getItem('store_id')}
      var that = this
      this.$get('goods/cate',data).then((res) => {
        that.cate = res.data
      })
    },
    showInput:function() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
    },
    handleClose:function(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    handleInputConfirm:function(){
        let inputValue = this.inputValue;
        if (inputValue) {
          this.tags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
    },
    beforeAvatarUpload:function(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res)
      this.item.img = res.data
    },
    add:function(){
      var that = this
      this.item.tag  = this.tags.join(",")
      var validate = {
        name:'商品名称不能为空',
        cid:'商品分类不能为空',
        price:'商品价格不能为空',
        lable:'商品单位不能为空',
        tag:'商品规格不能为空',
        img:'商品图片,必须上传'
      }

      for(var x in validate){
        if(!this.item[x]){
          this.$message.error(validate[x]);
          break;
          return;
        }
      }
      this.$post('goods/add',this.item).then((res) => {
          if(res.code == 1){
            that.$message.success(res.msg);
            that.$emit("func",{'key':'editShow','type':1})
          }else{
            that.$message.error(res.msg);
          }
      })
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>